<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-20 14:28:42
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-20 10:27:10
 * @FilePath: \sr_system_manager_ui\src\views\home\noticeList\index.vue
 * @Description: 通知公告列表
-->
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
import useUserStore from '@/store/modules/user'
import { skipType } from "@/utils/achievementSkipType"
import { getNoticePageApi } from "@/api/project/index"
import { getResultDetailReq } from "@/api/resultsManagement/assessmentReward/index"

const userStore = useUserStore()
const router = useRouter()
const configList = ref([])
const showSearch = ref(true)
const curId = ref()
const total = ref(0)
const queryParams = ref<any>({
  page: 1,
  size: 20,
  title: '',
  publishStatus: 2,
  noticeType: undefined,
  declareStartTime: undefined,
  declareEndTime: undefined,
})

// 搜索条件组件配置数据
const conditionComponents = ref([
  {
    type: 0,
    key: 'title',
    width: "220px",
    placeholder: '请输入通知名称'
  },
  {
    type: 1,
    key: 'noticeType',
    value: '单选框',
    width: "220px",
    placeholder: '请选择通知类型',
    config: {
      options: [
        {title: '项目申报', value: 1},
        {title: '项目预警', value: 2},
        {title: '成果通知', value: 3}
      ]
    }
  },
  {
    type: 2,
    key: 'calendar',
    value: '日历',
    width: "220px",
  },
])

// 表头
const columns = ref([
{
  title: '序号',
  dataIndex: 'key',
  width: 48,
  formatter: (_row, _column, _cellValue, index) => {
    return index + 1
  }
},
{
  title: '通知名称',
  minWidth: 150,
  dataIndex: 'title',
},
{
  title: '通知类型',
  minWidth: 80,
  dataIndex: 'noticeType',
  formatter: (record) => {
    const noticeType = {
      1: '项目申报',
      2: '项目预警',
      3: '成果通知',
    }
    return noticeType[record.noticeType]
  },
},
{
  title: '项目分类',
  minWidth: 80,
  dataIndex: 'projectType',
  formatter: (row) => {
    return row.projectType || '-'
  }
},
{
  title: '年度',
  minWidth: 80,
  dataIndex: 'statisticsYear',
  formatter: (row) => {
    return row.statisticsYear || '-'
  }
},
{
  title: '申报时间',
  minWidth: 120,
  dataIndex: 'declareStartTime',
  formatter: (row) => {
    return row.declareStartTime ? `${formateDate(row.declareStartTime).format('YYYY.MM.DD')} - ${formateDate(row.declareEndTime).format('YYYY.MM.DD')}` : '-'
  }
},
{
  title: '通知内容',
  minWidth: 720,
  dataIndex: 'content',
  slotName: 'content',
},
{
  title: '发送时间',
  minWidth: 100,
  dataIndex: 'updatedTime',
  formatter: (row: any) => {
    return formateDate(row.updatedTime).format('YYYY.MM.DD')
  }
},
{
  title: '操作',
  minWidth: 80,
  dataIndex: 'optional',
  slotName: 'optional',
}
])

// 查询列表
const { run: getNoticePage, loading } = useRequest(getNoticePageApi, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data) => {
    configList.value = data.content || []
    total.value = data.totalElements
  },
})
onSearch()

// 过滤查询
function onSearch() {
  getNoticePage(queryParams.value)
}
// 条件过滤
function formSearch(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
    calendar: undefined,
    declareStartTime: params.calendar ? params.calendar[0] + ' 00:00:00' : undefined,
    declareEndTime: params.calendar ? params.calendar[1] + ' 23:59:59' : undefined,
  }
  onSearch()
}
// 分页
function pagetionSerach(params){
  queryParams.value = {
    ...queryParams.value,
    ...params,
  }
  onSearch()
}

// 成果详情-通知
const { run: getResultDetail } = useRequest(getResultDetailReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    if(userStore.currentIdentityCode === 'NORMAL') {
      // 教职工
      router.push(`/resultsManagement/mine/mine-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    } else if(userStore.currentIdentityCode === 'FACULTY_ADMIN') {
      // 院系/部
      router.push(`/resultsManagement/college/college-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    } else{
      // 管理员
      router.push(`/resultsManagement/office/office-${skipType(data.achvType)}/detail?id=${curId.value}&mode=preview&readonly=true`)
    }
  },
})
// 查看通知详情：1项目申报 2项目预警 3成果通知
function toView(record) {
  curId.value = record.id
  if(record.noticeType === 1)
    router.push(`/project/manage/noticesDetails?id=${record.id}&from=notices`)
  else if(record.noticeType === 2)
    router.push(`/project/mine/edit?projectNature=${record.projectNature}&projectId=${record.projectId}&mode=view&projectName=${record.projectName}`)
  else if(record.noticeType === 3){
    curId.value = record.projectId
    getResultDetail({id: record.projectId})
  }
  
}
</script>

<template>
  <div class="app-container">
    <SearchBar :components="conditionComponents" @search="formSearch" class="mb-[16px]" />
    <TableForm
      :auto-height="true"
      :data="configList"
      :columns="columns"
      :tableLoading="loading"
      :total-count="total"
      v-model:showSearch="showSearch"
      :showToolBar="false"
      @refresh="pagetionSerach"
    >
      <template #content="{record}">
        <div v-html="record.content" class="mark" />
      </template>
      <template #optional="{record}">
        <el-button link type="primary" @click="toView(record)">
          {{ record.noticeType === 1 ? '查看' : record.noticeType === 2 ? '查看项目' : '查看成果' }}
        </el-button>
      </template>
    </TableForm>
  </div>
</template>

<style scoped lang="scss">
.mark{
  @apply: max-h-[36px];
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>